<template>
	<view class="address">
		<view class="list">
			<view class="input">
				<text>收件人</text>
				<input class="uni-input"   v-model="contactUser"/>
			</view>
			<view class="input">
				<text>手机号</text>
				<input class="uni-input" type="number"    maxlength="11" v-model="contactPhone" @blur="checkTel"/>
			</view>

			<view class="input">
				<text>所在地区</text>
				<view class="" @tap="toggleTab('linkage')" >
					<view  v-if="resultInfo.result" class="flex" style="text-align: right;">
						<text>{{resultInfo.result}}</text>
						<uni-icons type="arrowdown" size="24" class="right" color="#999" />
					</view>
					<view v-else class="flex" style="color: #999;text-align: right;" >请选择地址 <uni-icons type="arrowdown" size="24" class="right" color="#999" />
					</view>
				</view>
			</view>

			<view class="input">
				<text>详细地址</text>
				<input class="uni-input" v-model="addrDetail" maxlength="100"/>
			</view>
		</view>
		<view class="cut-off"></view>
		<view class="first">
			<text style="font-size: 14px;">设为默认地址</text>
			<switch @change="switchChange" :checked="first"/>
		</view>
		<view class="button" @click="save()">保存</view>
		<w-picker
			mode="linkage"
			:level="3"
			@confirm="onConfirm"
			ref="linkage"
			:linkList="linkList"
			themeColor="#bd3c8c"
		></w-picker>
	</view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";
import { uniIcons } from '@dcloudio/uni-ui';
import address from '../../../servers/my/address.js';	
import particulars from '../../../servers/agent/placeorder/particulars.js';
import loginApi from '../../../servers/shop/login.js'
export default {
	components: { uniIcons,wPicker},
	data() {
		return {
			value: '',
			first: false,
			initData:'',
			id: null,
			edid: false,			
			multiIsIndex: [],
			addrDetail:'',
			contactPhone:'',
			contactUser:'',
			initAddress:'',
			townCode:'',
			isDefault:false,
			regionDval:[],
			resultInfo:{
				result:""
			},
			city:'',
			province:'',
			region:'',
			citycode:'',
			provincecode:'',
			regioncode:'',
			linkList:[],
			isCheckOut:false
		};
	},
	mounted() {
		var _this = this
		// this.id = uni.getStorageSync('shopmyaddress_detail')||this.$route.query.shopmyaddress_detail
		this.id = this.commonality.route_get('shopmyaddress_detail', this.$route)
		
		if (this.id) {
			this.getData(this.id +'')
			uni.setNavigationBarTitle({
				title: '地址修改'
			});
		}
		this.getAddr();
	},
	methods: {
		toggleTab(str){
			this.$refs[str].show();
		},
		onConfirm(val){
			console.log(val);
			this.province=val.checkArr[0]
			this.city=val.checkArr[1];			
			this.region=val.checkArr[2];
			this.provincecode=val.checkValue[0]
			this.citycode=val.checkValue[1];			
			this.regioncode=val.checkValue[2];
			this.resultInfo={...val};
			// this.changeList()
		},
		
		
		// 地址
		getAddr(){
			particulars.cityArea().then(res => {
				this.linkList=res.data;
				})
				.catch(err => {
					
					console.log(new Error('请检查网络后重试'));
				});
		},
		// 检查手机号是否可用
		checkTel(){
			if(!this.contactPhone){
				return
			}
			if(this.contactPhone.length==11){
				let data = {
					mobile:this.contactPhone
				}
				loginApi.checkTel(data).then(res=>{
					if(res.code === 200&& !res.subCode){
						this.isCheckOut = true
						
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg,
						    duration: 2000
						});
						this.isCheckOut = false
						return
					}
				})
			}
			
			
			
		},
		
		switchChange(e) {
			this.first = e.target.value;
		},
		changeList(e) {
			this.multiIsIndex = e.detail.value;
		},
		
		getData(id){
			//初始化数据
			address.selectDetail(id)
				.then(res => {
			
					this.initData = res.data;
					this.contactUser=this.initData.contactUser;
					this.contactPhone=this.initData.contactPhone;
					this.addrDetail=this.initData.addrDetail;
					this.resultInfo.result=`${res.data.province} ${res.data.city} ${res.data.region}`
					if(res.data.isDefault.value) this.first = true
					this.province=res.data.province
					this.city=res.data.city
					this.region=res.data.region
					this.edid =true
					this.isDefault=0;
			
					this.$forceUpdate()
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
				
				uni.hideLoading();
		},
		save(){
			var obj=new Object();
			var _this=this;
			if(!this.resultInfo.result){
				uni.showToast({
				    title: '请选择省市信息',
					icon:'none'
				});
			    return 
			}else{
				obj.province=this.province;
				obj.city = this.city
				obj.region = this.region
				obj.provincecode=this.provincecode
				obj.citycode=this.citycode
				obj.regioncode=this.regioncode
			}
			if(!this.contactUser){
				uni.showToast({
				    title: '请填写收件人信息',
					icon:'none'
				});
				return 
			}else{
				obj.contactUser=this.contactUser
			}
			
			if(!this.contactPhone){
				uni.showToast({
				    title: '请填写手机号',
					icon:'none'
				});
				return 
			}else{
				if(this.contactPhone.length!=11&&this.contactPhone||!this.id&&!this.isCheckOut){
					uni.showToast({
					    title: "请输入正确的手机号",
						icon:'none',
						position:'bottom'
					})
					return
				}
				obj.contactPhone=this.contactPhone;
			}
			if(!this.addrDetail){
				uni.showToast({
				    title: '请填写详细的收货地址',
					icon:'none'
				});
				return 
			}else{
				obj.addrDetail=this.addrDetail
			}
			if(this.first){
				obj.isDefault=1
			}else{
				obj.isDefault=0
			}	
			
			obj.id=this.id;
			obj.townCode=this.townCode;
			//提交数据
			uni.showLoading({
			    title: '加载中',
				mask:true
			});
			address.save(obj)
				.then(res => {
					uni.hideLoading();
					if(res.code==200){
						uni.showToast({
						    title: '保存成功',
							complete:function(){
								_this.commonality.back()							
							}
						});
						
					}else{
						uni.showToast({
						    title: '保存失败，请联系管理员',
							icon:'none'
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
					uni.showToast({
					    title: '保存失败，请检查网络',
						icon:'none'
					});
					console.log(new Error('请检查网络后重试'));
				});
			
		}
	}
};
</script>

<style lang="less" scoped>
.address {
	.list {
		background: #fff;
		line-height: 114rpx;
		.input {
			border-bottom: 1rpx solid #eeeeee; /*no*/
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			text {
				width: 190rpx;
			}
			.uni-input,
			.uni-picker {
				height: 114rpx;
				flex: 1;
				text-align: right;
			}
			.cube-input::after,
			.cube-select::after {
				border: none;
			}
			.flex{
				display: flex;
				align-items: center;
				text{
					width: auto;
				}
			}
		}
	}
	.first {
		line-height: 114rpx;
		background: #fff;
		position: relative;
		padding: 0 20rpx;
		border-top: 1rpx solid #eeeeee; /*no*/
		border-bottom: 1rpx solid #eeeeee; /*no*/
		display: flex;
		justify-content: space-between;
		.cube-switch {
			position: absolute;
			top: 30rpx;
			right: 20rpx;
		}
	}
	.button {
		width: -webkit-fill-available;
		margin: 50rpx 20rpx;
		line-height: 90rpx;
		background: linear-gradient(80deg, #d2158a, #fc6395);
		text-align: center;
		color: #fff;
		border-radius: 45rpx;
		font-size: 32rpx;
		box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
	}
}
.address .list .input uni-text,.address .list .input .flex{
	font-size: 14px;
}
</style>
